<template>
  <div ref="orderTotalAmountDiv" style="width: 100%; height: 100%;"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts' // 导入Echart库中所有的图形报表组件
import { getStatisticsInfo } from '@/api/order'

const dataList = ref([])
const totalList = ref([])
const getData = async () => {
  dataList.value = []
  totalList.value = []
  const res = await getStatisticsInfo()
  console.log(res)
  dataList.value = res.data.orderDataList
  totalList.value = res.data.totalAmountList
}

// 定义chart数据模型，用来选中div组件
const orderTotalAmountDiv = ref()
// 需要在onMounted钩子函数中对div区域使用echarts进行初始化
onMounted(async () => {
  await getData()
  // 基于准备好的dom，初始化echarts实例
  var orderTotalAmountChart = echarts.init(orderTotalAmountDiv.value)

  // 绘制图表
  orderTotalAmountChart.setOption({
    title: {
      text: '订单数据统计',
    },
    tooltip: {},
    xAxis: {
      data: dataList.value,
    },
    yAxis: {},
    series: [
      {
        name: '订单总金额（万元）',
        type: 'bar',
        data: totalList.value,
      },
    ],
  })
})
</script>

<style scoped></style>
